<template>
  <div>
    用户名: <input v-model="username" type="text"><br>
    姓名: <input v-model="user.name" type="text">
    年龄: <input v-model="user.age" type="text">
  </div>
</template>

<script>
export default {

  data() {
    return {
      username:'',
      user:{
      name:'',
      age:''
      }
    };
  },
  //侦听器 /监听器
  watch:{
    //语法
    //要监听的数据(newVal,oldVal){}
    username(newVal,oldVal){
      //只要数据变化,函数会自动执行
      console.log(newVal,oldVal);
    },
    //监听器的完整写法
    //要监听的数据:{
    // handler(newVal,oldVal){},
    // deep:true //开启深度侦听    
    //}
    user:{
      handler(){
      // handler(newVal,oldVal){
        //注意事项:在Vue2中, newVal 和oldVal是一样的, 这是一个官方bug
        //为什么不解决?因为这个bug不影响开发没我们在写代码的时候,几乎所有情况下都使用newVal
        // console.log(newVal,oldVal);
        console.log(this.user);
      },
        deep:true,
        immediate:true
    }
  }
 

};
</script>

<style>

</style>